<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/template/commonLayout.xhtml">

	<ui:define name="title">
		<h:outputText value="#{Title.semester}" />
	</ui:define>

	<ui:define name="content">
		<h:form id="mailForm">
			<p:layout fullPage="false">

				<p:layoutUnit position="west" size="200" resizable="true"
					header="MAILBOXES">
					<h:form>
						<p:tree value="#{mailbox.mailboxes}" var="box"
							selectionMode="single" selection="#{mailbox.mailbox}"
							style="width:170px">
							<p:treeNode icon="ui-icon ui-icon-mail-closed">
								<h:outputText value="#{box}" />
							</p:treeNode>

							<p:treeNode type="i" icon="ui-icon ui-icon-mail-closed">
								<h:outputText value="#{box}" />
							</p:treeNode>

							<p:treeNode type="s" icon="ui-icon ui-icon-transfer-e-w">
								<h:outputText value="#{box}" />
							</p:treeNode>

							<p:treeNode type="t" icon="ui-icon ui-icon-trash">
								<h:outputText value="#{box}" />
							</p:treeNode>

							<p:treeNode type="j" icon="ui-icon ui-icon-alert">
								<h:outputText value="#{box}" />
							</p:treeNode>
						</p:tree>
					</h:form>
				</p:layoutUnit>

				<p:layoutUnit position="center">
					<p:layout>

						<p:layoutUnit position="north" size="40%" resizable="true"
							styleClass="nestedUnit">
							<p:tabView>
								<p:tab title="Gmail">
									<h:form>
										<p:dataTable var="mail" value="#{mailbox.mails}">
											<p:column headerText="From" sortBy="#{mail.from}">
                                                #{mail.from}
                                            </p:column>
											<p:column headerText="Subject" sortBy="#{mail.subject}">
                                                #{mail.subject}
                                            </p:column>
											<p:column headerText="Date" sortBy="#{mail.date}">
                                                #{mail.date}
                                            </p:column>

											<p:column>
												<p:commandButton update=":mailViewer"
													icon="ui-icon ui-icon-search" title="View">
													<f:setPropertyActionListener value="#{mail }"
														target="#{mailbox.mail}" />
												</p:commandButton>
											</p:column>
										</p:dataTable>
									</h:form>
								</p:tab>
								<p:tab title="Compose">
									<p:commandButton value="Compose" onclick="composeDlg.show()"
										type="button" icon="ui-icon ui-icon-document" />
								</p:tab>
							</p:tabView>
						</p:layoutUnit>
						<p:layoutUnit position="center" styleClass="nestedUnit">
							<p:outputPanel id="mailViewer">
								<h:outputText value="#{mailbox.mail.body}"
									rendered="#{not empty mailbox.mail}" />
							</p:outputPanel>
						</p:layoutUnit>
					</p:layout>

				</p:layoutUnit>
			</p:layout>

			<p:ajaxStatus
				style="width:20px;height:20px;display:block;position:fixed;right:0;top:0;z-index:50">
				<f:facet name="start">
					<p:graphicImage value="/images/loading.gif" />
				</f:facet>

				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>

			<p:dialog widgetVar="composeDlg" modal="true" header="New Email"
				width="530" showEffect="fade" hideEffect="fade">
				<h:form>
					<h:panelGrid columns="2" cellspacing="5">
						<h:outputLabel for="to" value="To: " />
						<p:inputText id="to" />

						<h:outputLabel for="cc" value="CC: " />
						<p:inputText id="cc" />

						<h:outputLabel for="subject" value="To: " />
						<p:inputText id="subject" size="50" />
					</h:panelGrid>
					<p:separator />
					<p:editor widgetVar="editor" />
					<p:separator />
					<p:commandButton value="Send" onclick="composeDlg.hide()"
						actionListener="#{mailbox.send}" process="@this" />
					<p:commandButton value="Cancel" onclick="composeDlg.hide()"
						type="button" />
				</h:form>
			</p:dialog>
			<!-- MSG DELETED -->
		</h:form>
	</ui:define>

	<ui:define name="footer"></ui:define>
</ui:composition>
